@import "base";

.custom-class{
  .van-tab{
    color: #333333 !important;
    font-size: px2rpx(15) !important;
  }
  .van-tab--active{
    color: #F19F00 !important;
  }
  .van-hairline--top-bottom::after{
    border-top-width: 0 !important;
  }
  .van-hairline--top-bottom::after{
    border-bottom-width: px2rpx(4) !important;
    border-bottom-color: #E3E3E3 !important;
  }
  .van-tabs__wrap{
    //position: fixed !important;
  }
}

.discovery-view{
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: px2rpx(15);
  .discovery-container{
    display: flex;
    justify-content: center;
    margin-top: px2rpx(21);
    .content-container{
      display: flex;
      flex-direction: column;
      .discovery-item:active{
        opacity: 0.9;
      }
      .discovery-item{
        overflow: hidden;
        background:rgba(255,255,255,1);
        border:1px solid rgba(227,227,227,1);
        border-radius:4px;
        box-shadow: 0 0 px2rpx(10) #E8E8E8;
        margin-bottom: px2rpx(9);
        display: flex;
        flex-direction: column;
        position: relative;
        .location{
          padding: px2rpx(5);
          border-radius: px2rpx(2);
          position: absolute;
          left: px2rpx(7);
          top: px2rpx(6);
          background-color: rgba(0,0,0,0.26);
          display: flex;
          align-items: center;
          image{
            width: px2rpx(9);
            height: px2rpx(13);
          }
          text{
            margin-left: px2rpx(5);
            color: #FFFFFF;
            font-weight: 400;
            font-size: px2rpx(11);
          }
        }
        .desc{
          margin: px2rpx(10);
          color: #333333;
          font-size: px2rpx(12);
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          align-content: center;
        }
        .info{
          display: flex;
          margin-bottom: px2rpx(7);
          .avatar-container{
            margin-left: px2rpx(11);
            display: flex;
            align-items: center;
            image{
              width: px2rpx(22);
              height: px2rpx(22);
              border-radius: 50%;
              overflow: hidden;
            }
            text{
              margin-left: px2rpx(8);
              color: #999999;
              font-size: px2rpx(12);
            }
          }
          .like-container{
            margin-left: auto;
            margin-right: px2rpx(11);
            display: flex;
            align-items: center;
            image{
              width: px2rpx(12);
              height: px2rpx(12);
            }
            text{
              margin-left: px2rpx(5);
              color: #999999;
              font-size: px2rpx(11);
            }
          }
        }
      }
    }
    .left-container{
      width: px2rpx(169);
      .thumb{
        width: px2rpx(169);
        height: px2rpx(113);
      }
    }
    .right-container{
      width: px2rpx(169);
      margin-left: px2rpx(7);
      .thumb{
        width: px2rpx(169);
        height: px2rpx(130);
      }
    }
  }
}

.talk-about {
  display: flex;
  flex-direction: column;
  .item-view {
    display: flex;
    flex-direction: column;
    position: relative;
    .avatar-container {
      margin-top: px2rpx(11);
      margin-left: px2rpx(15);
      display: flex;
      align-items: center;
      image {
        width: px2rpx(22);
        height: px2rpx(22);
        overflow: hidden;
        border-radius: 50%;
      }
      text {
        margin-left: px2rpx(8);
        color: #999999;
        font-size: px2rpx(12);
      }
    }
    .content {
      margin: px2rpx(10) px2rpx(15);
      color: #333333;
      font-size: px2rpx(12);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      align-content: center;
    }
    .image-container{
      background-color: white;
      display: flex;
      flex-direction: column;
      position: relative;
      padding-bottom: px2rpx(12);
    }
    .image-list {
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      padding-left: px2rpx(5);
      image {
        margin-left: px2rpx(10);
        margin-bottom: px2rpx(10);
        width: px2rpx(112);
        height: px2rpx(81);
        border-radius: px2rpx(4);
      }
    }
    .operate-view {
      display: flex;
      .left {
        margin-left: px2rpx(15);
        text {
          color: #F19F00;
          font-size: px2rpx(12);
        }
      }
      .right {
        margin-left: auto;
        display: flex;
        align-items: center;
        margin-right: px2rpx(15);
        .common {
          display: flex;
          align-items: center;
        }
        .view-view {
          image {
            width: px2rpx(12);
            height: px2rpx(12);
          }
        }
        .like-view {
          margin-left: px2rpx(15);
          image {
            width: px2rpx(12);
            height: px2rpx(11);
          }
        }
        .comment-view {
          margin-left: px2rpx(15);
          image {
            width: px2rpx(12);
            height: px2rpx(11);
          }
        }
        text {
          margin-left: px2rpx(7);
          color: #999999;
          font-size: px2rpx(11);
        }
      }
    }
    .tag {
      z-index: -1;
      background-color: #FE585A;
      width: px2rpx(80);
      height: px2rpx(20);
      position: absolute;
      top: 0;
      right: px2rpx(-20);
      transform: rotate(45deg);
      text{
        position: absolute;
        right: px2rpx(26);
        top: px2rpx(2);
        font-size: px2rpx(11);
        color: white;
      }
    }
  }
}

.discovery-add{
  position: fixed;
  bottom: px2rpx(10);
  right: px2rpx(10);
  width: px2rpx(56);
  height: px2rpx(56);
}
